<template>
	<van-nav-bar left-text="返回" left-arrow @click-left="goback">
		<template #right>
			<van-icon name="search" size="18" />
		</template>
		<template #title>
			{{deviceName}}
		</template>
	</van-nav-bar>
	<div class="Box">
		<div class="Camera">
<!--			<iframe src="http://10.112.6.250:8888/api/v2/video" style="width:100%;height:100%"></iframe>-->
			<iframe :src="vedioSrc" style="width:100%;height:100%"></iframe>

		</div>
		<div style="width:90%;display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 20px;">
			<div>设备状态：<a style="color:green;">{{DeviceStatus}}</a></div>
			<div>设备总运行时间:&nbsp<a style="font-weight: bold">{{DeviceRuntime}}</a>&nbsph</div>
		</div>
		<div class="underList">
			<show-device-data ></show-device-data>

		</div>
		<div style="margin-top: 20px;border: #666666 1px solid;width:50%;height: 50px;
					border-radius: 30px;display: flex;flex-direction: column;
					justify-content: center;align-items: center" @click="generate" v-if="hasGenerateTaskPermission()">
			生成工单
		</div>
		<van-loading v-if="loading"/>
	</div>

</template>

<script>
import router from "@/router";
import ShowDeviceData from "@/views/vedioCheck/device/ShowDeviceData.vue";
import {hasGenerateTaskPermission} from "@/store/permission";

export default {
	components: {ShowDeviceData},
	data(){
		return{
			role:'',
			deviceID: '',
			deviceName: '',
			deviceData: [],
			DeviceStatus:'正常',
			DeviceRuntime: '28',
			loading:false,
			vedioSrc:'http://127.0.0.1:8081/video?name='
		}
	},
	methods:{
		hasGenerateTaskPermission,
		goback(){							//返回按钮
			//console.log('goback')
			router.go(-1)
		},
		generate(){
			console.log('genarate')
			this.loading = true
			window.setTimeout(() => {	//延迟，跳转到所有产线页面，让用户重新选择产线
				this.$router.push({name:'GenerateTask',query:{title:'生成工单'}})
				//console.log('end')
			}, 1000)
		}
	},
	mounted() {
		console.log('device detail - mounted')		//表明组件的加载状态
		/*
		* 打印路由里设备名称和设备ID，设备名称和line名称两种方式实现传递，
		* 		- 路由里加了参数（路由方式传递是最初的想法，如果后面页面不多，而且不需要当前页面的数据的时候，可以值使用路由来传第参数）
		* 		- vuex里存储了当前页面数据，这里添加了页面所需的参数（当前产线，设备信息，提供给后面的页面使用）
		* */
		if(this.$route.query.deviceName){
			//console.log(this.$route.query)
			this.deviceID = this.$route.query.deviceID
			this.deviceName = this.$route.query.deviceName
		}
		//系那个当前用户的角色加载一下
		if(this.$store.state.currentUser.role){
			this.role = this.$store.state.currentUser.role
		}
		this.vedioSrc += this.deviceName
	}
}
</script>

<style scoped>
.Box{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}
.Camera{
	width:98%;
	height:250px;
	border: cadetblue 1px solid;
}
.underList{
	margin-top: 20px;
	border: cadetblue 1px solid;
}
</style>